<template>
  <div class="app-container">
    <el-dialog title="用户详情" :visible.sync="open" width="70%" append-to-body :close-on-click-modal='false'>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户信息" name="userInfo">
          <userInfo ref="userInfo" />
        </el-tab-pane>
        <el-tab-pane label="订单记录" name="orders">
          <orders ref="orders" />
        </el-tab-pane>
        <el-tab-pane label="资金明细" name="funds">
          <funds ref="funds" />
        </el-tab-pane>
        <el-tab-pane label="大神技能" name="gods">
          <gods ref="gods" />
        </el-tab-pane>
        <el-tab-pane label="礼物墙" name="gift">
          <gift ref="gift" />
        </el-tab-pane>
        <el-tab-pane label="违规记录" name="violation">
          <violation ref="violation" />
        </el-tab-pane>
        <el-tab-pane label="动态列表" name="dynamic">
          <dynamic ref="dynamic"/>
        </el-tab-pane>
        <el-tab-pane label="登录日志" name="log">
          <log ref="log" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import userInfo from "@/components/UserInfo/userInfo"
import orders from "@/components/UserInfo/orders"
import funds from "@/components/UserInfo/funds"
import gods from "@/components/UserInfo/gods"
import gift from "@/components/UserInfo/gift"
import violation from "@/components/UserInfo/violation"
import dynamic from "@/components/UserInfo/dynamic"
import log from "@/components/UserInfo/log"
export default {
  components:{
    userInfo,
    orders,
    funds,
    gods,
    gift,
    violation,
    dynamic,
    log
  },
  data() {
    return {
      activeName: 'userInfo',
      open:false,
      userData:''
    };
  },
  created() {
    // this.$nextTick(() => {
    //   this.showComp(this.activeName)
    // })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name)
      this.showComp(tab.name)
    },
    showComp(name){
      switch (name) {
        case 'userInfo':
          this.$refs.userInfo.init(this.userData.id)
          break;
        case 'orders':
          this.$refs.orders.init(this.userData.id)
          break;
        case 'funds':
          this.$refs.funds.init(this.userData)
          break;
        case 'gods':
          console.log("gods123")
          this.$refs.gods.init(this.userData.id)
          break;
        case 'gift':
          this.$refs.gift.init(this.userData.id)
          break;
        case 'violation':
          this.$refs.violation.init(this.userData.id)
          break;
        case 'dynamic':
          this.$refs.dynamic.init(this.userData.id)
          break;
        case 'log':
          this.$refs.log.init(this.userData.id)
          break;
        default:
          break;
      }
    },
    init(row){
      this.open = true
      this.activeName = 'userInfo'
      this.userData = row
    }
  }
};
</script>